<template>
  <div class="add-settlement">
    <el-dialog
      :title="$t('task.detail.components.addToSettlement')"
      :visible.sync="isShow"
      width="500px"
    >
      <div class="Select">
        <div style="display: inline-block">
          <div class="select-settle">
            <label><span>*</span>{{$t('task.detail.components.settlement')}}</label>
            <base-select
              v-model="value"
              clearable
              :remote-method="fetchSettles"
              :placeholder="$t('common.placeholder.select')"
              :messageProp="{
                nothing: $t('task.tip.settlementTip1')
              }" 
            >
              <template slot="option" slot-scope="{option}">
                <div class="settle-choose-option">
                  <div class="option-title">{{$t('task.detail.components.settlementNo')}}：
                    <a :href="`/pcResourceManage/settleDetailView?id=${option.id}`" :data-id="option.id" @click="openDetail">{{ option && option.settleNo }} </a>
                  </div>
                  <div class="info2"><label> {{$t('common.form.type.serviceProviders')}}：</label>{{ option && option.tagName }}</div>
                  <!--                  <div class="info2">
                    <label> 负责人：</label>{{ option && option.manager && option.manager.displayName }}
                  </div>-->
                </div>
              </template>
            </base-select>
          </div>
          <div class="add-settle-note">
            {{$t('task.tip.settlementTip2')}}
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShow = false">{{$t('common.base.close')}}</el-button>
        <el-button type="primary" @click="save" :disabled="pending" :loading="confirmLoading">{{$t('common.base.add')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
/* api */
import * as TaskApi from '@src/api/TaskApi.ts';
import { openAccurateTab } from '@src/util/platform'
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'
export default {
  name: 'shb-pc-fe-addsettlement',
  props: {
    isSettlement: {
      default: false,
      type: Boolean,
    },
    taskId: {
      default: '',
      type: String,
    },
    providerId: {
      default: '',
      type: String,
    }
  },
  watch: {
    isSettlement(value) {
      this.isShow = value;
      this.value = [];
    },
  },
  data() {
    return {
      loading: false,
      isShow: false,
      value: [],
      pending: false,
      confirmLoading: false,
    };
  },
  methods: {
    async fetchSettles (params = {}) {
      let { keyword, pageNum } = params;
      const dataToSend = {
        pageNum,
        keyword,
        module: ['1'], // 工单结算单
        state: ['0'], // 未结算的状态
        departIds: [ this.providerId], // 部门id
      };
      let res = await TaskApi.settleList(dataToSend);
      res = res.result;
      if (!res || !res.list) return;
      res.list = res.list.map(item => Object.freeze({
        label: item.settleNo,
        value: item.id,
        ...item
      }))
      return res;
    },
    async save() {
      if(!this.value.length) {
        this.$message({
          message: this.$t('task.tip.settlementTip3'),
          type: 'warning',
        });
      }else {
        this.isShow = false;
        this.confirmLoading = true;
        this.pending = true;
        let data = {
          settleId: this.value[0].id,
          objectIds: [this.taskId],
          type: 1,
        }
        try {
          let res = await TaskApi.addToSettle(data);
          this.$platform.notification({
            type: res.code === 0 ? 'success' : 'error',
            title: res.message,
          });
        } catch (error) {
          console.error('add to settle error', error);
        } finally {
          this.pending = false;
          this.confirmLoading = false;
          this.$emit('refresh-settle')
        }
      }
    },
    // 跳转结算单详情
    openDetail(event){
      event.preventDefault();
      if (!window.frameElement) return;
      let el = event.target;
      openAccurateTab({
        type: PageRoutesTypeEnum.PagePcResourceManage,
        key: el.dataset.id,
        params: `id=${el.dataset.id}`
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.add-settlement {
  .select-settle {
    margin-bottom: 8px;
    display: flex;
    label {
      margin-right: 8px;
      height: 32px;
      line-height: 32px;
      span {
        color: red;
        margin-right: 2px;
      }
    }
    ::v-deep .base-select-container {
      min-width: 270px;
      font-size: 12px;
    }
  }
  .add-settle-note {
    color: #f59a23;
    text-align: left;
    font-size: 12px;
  }
  ::v-deep .el-select-dropdown__item {
    height: auto;
  }
  ::v-deep .el-dialog__body {
    padding: 20px;
  }
}
.settle-choose-option {
  .option-title {
    font-size: 14px;
    color: #606266;
    a {
      color: $color-primary-light-6;
    }
  }
  .info2 {
    font-size: 12px;
    font-weight: 500;
    color: #666;
  }
}
</style>
